<template>
<div style="width:1200px;margin:0 auto;overflow:hidden" class="getActicleType">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"  style="">
        <el-menu-item v-for="(item,index) in data1" :key="index" :index='index'  :data_id="item.category_id" @click="getCategoryId(item.category_id)">{{item.name}}</el-menu-item>
    </el-menu>
</div>
    
</template>

<script>
export default {
  name: "classify",
  data() {
    return {
        activeIndex:'0'
    };
  },
  props:['data1','category_id'],
  methods:{
        getCategoryId:function(id){
            this.$emit('getId',id)
        },
  }
};
</script>

<style scoped lang="scss">
.getActicleType{
    .el-menu-item{
        line-height: 2em;
        height:2em;
        padding:0px;
        margin:16px 20px;
    }
}
.el-menu-item.is-active {
   color: #FF4C50!important;
   border-bottom:1px #FF4C50 solid !important;
}
.el-menu.el-menu--horizontal{
  border:none!important;
}
</style>
